<!DOCTYPE HTML>
<html class='dark'>
<head>
	<meta charset="utf-8">
	<title>Button 按钮</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" /> -->
	<!-- <link rel="stylesheet" href="../static/css/element.css"> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<!-- <script src="//unpkg.com/vue@3"></script> -->
	<!-- <script src="//cdn.jsdelivr.net/npm/vue@3"></script> -->
	<!-- <script src="../static/js/vue.global.js"></script> -->
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<!-- <script src="//cdn.jsdelivr.net/npm/element-plus"></script> -->
	<!-- <script src="../static/js/element-plue.js"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

<style>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
html.dark {
  /* 自定义深色背景颜色 */
  /* --el-bg-color: #626aef; */
  /* --el-color-primary: red; */
}
</style>
</head>
<body>
<div id="app" class="">
	<!-- <el-divider>Button 按钮</el-divider> -->
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<el-row>
		<el-button @click="hello('Default')">Default</el-button>
		<el-button type="primary" @click="hello('Primary')">Primary</el-button>
		<el-button type="success">Success</el-button>
		<el-button type="info">Info</el-button>
		<el-button type="warning">Warning</el-button>
		<el-button type="danger">Danger</el-button>
		<el-button>中文</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button plain>Plain</el-button>
		<el-button type="primary" plain>Primary</el-button>
		<el-button type="success" plain>Success</el-button>
		<el-button type="info" plain>Info</el-button>
		<el-button type="warning" plain>Warning</el-button>
		<el-button type="danger" plain>Danger</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button round>Round</el-button>
		<el-button type="primary" round>Primary</el-button>
		<el-button type="success" round>Success</el-button>
		<el-button type="info" round>Info</el-button>
		<el-button type="warning" round>Warning</el-button>
		<el-button type="danger" round>Danger</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button :icon="Icons.Search" circle></el-button>
		<el-button type="primary" :icon="Icons.Edit" circle></el-button>
		<el-button type="success" :icon="Icons.Check" circle></el-button>
		<el-button type="info" :icon="Icons.Message" circle></el-button>
		<el-button type="warning" :icon="Icons.Star" circle></el-button>
		<el-button type="danger" :icon="Icons.Delete" circle></el-button>
		<el-button type="primary" circle><el-icon><Edit /></el-icon></el-button>
	</el-row>
	<br>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<el-row>
		<el-button disabled>Default</el-button>
		<el-button type="primary" :disabled="false">Primary</el-button>
		<el-button type="success" disabled>Success</el-button>
		<el-button type="info" disabled>Info</el-button>
		<el-button type="warning" disabled>Warning</el-button>
		<el-button type="danger" disabled>Danger</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button plain disabled>Plain</el-button>
		<el-button type="primary" plain disabled>Primary</el-button>
		<el-button type="success" plain disabled>Success</el-button>
		<el-button type="info" plain disabled>Info</el-button>
		<el-button type="warning" plain disabled>Warning</el-button>
		<el-button type="danger" plain disabled>Danger</el-button>
	</el-row>
	<br>
	
	<el-divider content-position="left">链接按钮</el-divider><!-- =============================================================== -->
	<p>基本用法</p>
	<el-button type="" link>plain</el-button>
	<el-button type="primary" link>primary</el-button>
	<el-button type="success" link>success</el-button>
	<el-button type="info" link>info</el-button>
	<el-button type="warning" link>warning</el-button>
	<el-button type="danger" link>danger</el-button>
	<p>禁用的</p>
	<el-button type="" link disabled>plain</el-button>
	<el-button type="primary" link disabled>primary</el-button>
	<el-button type="success" link disabled>success</el-button>
	<el-button type="info" link disabled>info</el-button>
	<el-button type="warning" link disabled>warning</el-button>
	<el-button type="danger" link disabled>danger</el-button>
	<br>
	
	<el-divider content-position="left">文字按钮</el-divider><!-- =============================================================== -->
	<p>基本用法</p>
	<el-button type="" text>plain</el-button>
	<el-button type="primary" text>primary</el-button>
	<el-button type="success" text>success</el-button>
	<el-button type="info" text>info</el-button>
	<el-button type="warning" text>warning</el-button>
	<el-button type="danger" text>danger</el-button>
	<p>带背景色的</p>
	<el-button type="" text bg>plain</el-button>
	<el-button type="primary" text bg>primary</el-button>
	<el-button type="success" text bg>success</el-button>
	<el-button type="info" text bg>info</el-button>
	<el-button type="warning" text bg>warning</el-button>
	<el-button type="danger" text bg>danger</el-button>
	<p>禁用的</p>
	<el-button type="" text disabled>plain</el-button>
	<el-button type="primary" text disabled>primary</el-button>
	<el-button type="success" text disabled>success</el-button>
	<el-button type="info" text disabled>info</el-button>
	<el-button type="warning" text disabled>warning</el-button>
	<el-button type="danger" text disabled>danger</el-button>
	<br>
	<!-- const buttons = [
	  { type: '', text: 'plain' },
	  { type: 'primary', text: 'primary' },
	  { type: 'success', text: 'success' },
	  { type: 'info', text: 'info' },
	  { type: 'warning', text: 'warning' },
	  { type: 'danger', text: 'danger' },
	] as const -->
	
	<el-divider content-position="left">图标按钮</el-divider><!-- =============================================================== -->
	<el-button type="primary" :icon="Icons.Edit"></el-button>
	<el-button type="primary" :icon="Icons.Share"></el-button>
	<el-button type="primary" :icon="Icons.Delete"></el-button>
	<el-button type="primary" :icon="Icons.Search">Search</el-button>
	<el-button type="primary">
		Upload<el-icon class="el-icon--right"><Upload /></el-icon>
	</el-button>
	<el-button type="primary">
		采用<el-icon v-if="false" class="el-icon--right"><Check /></el-icon>
	</el-button>
	
	<el-button type="primary">
		<el-icon class="el-icon--left">
			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
		</el-icon>
		Search
	</el-button>
	
	<el-divider content-position="left">按钮组</el-divider><!-- =============================================================== -->
	<el-button-group>
		<el-button type="primary" :icon="Icons.ArrowLeft">Previous Page</el-button>
		<el-button type="primary">
			Next Page<el-icon class="el-icon--right"><Arrow-right /></el-icon>
		</el-button>
	</el-button-group>
	
	&nbsp;&nbsp;&nbsp;&nbsp;
	<el-button-group class="ml-4">
		<el-button type="primary" :icon="Icons.Edit" ></el-button>
		<el-button type="primary" :icon="Icons.Share" ></el-button>
		<el-button type="primary" :icon="Icons.Delete" ></el-button>
	</el-button-group>
	<br>
	
	<el-divider content-position="left">加载状态按钮</el-divider><!-- =============================================================== -->
	<el-button type="primary" :loading="true">Loading</el-button>
	<el-button type="primary" loading>Loading</el-button>
	<el-button type="primary" :loading-icon="Icons.Eleme" loading>Loading</el-button>
	<el-button type="primary" loading>
		<template #loading>
			<div class="custom-loading">
				<svg class="circular" viewBox="-10, -10, 50, 50"><path class="path" d="M 30 15 L 28 17 M 25.61 25.61 A 15 15, 0, 0, 1, 15 30 A 15 15, 0, 1, 1, 27.99 7.5 L 15 15" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" /></svg>
			</div>
		</template>
		Loading
	</el-button>
	<br>
	
	<el-divider content-position="left">各种尺寸的尺寸按钮</el-divider><!-- =============================================================== -->
	<el-row>
		<el-radio-group v-model="size" label="size control">
			<el-radio-button label="large">large</el-radio-button>
			<el-radio-button label="default">default</el-radio-button>
			<el-radio-button label="small">small</el-radio-button>
		</el-radio-group>
	</el-row>
	<div style="height: 10px;"></div>
	<el-row>
		<el-button :size="size">Large</el-button>
		<el-button :size="size">Default</el-button>
		<el-button :size="size">Small</el-button>
	</el-row>
	<br>
	
	<el-divider content-position="left">自定义颜色</el-divider><!-- =============================================================== -->
	<el-row>
		<el-button color="#626aef" style="color: white">Custom</el-button>
		<el-button color="#626aef" plain>plain</el-button>
		<el-button color="#626aef" style="color: white" disabled>Custom</el-button>
		<el-button color="#626aef" plain disabled>plain</el-button>
	</el-row>
	<br>
	
	<br>
	<el-button @click="fn()">点击</el-button>
	<!-- 如果不需要传参，可以省略括号 -->
	<button v-on:click="fn">点击2</button>
	<!-- 缩写，简写 -->
	<button @click="fn">点击3</button>
	<!-- 带参数的 -->
	<el-button type="primary" @click="hello('8866')">点击4</el-button>
	<!-- <button @click="hello('8866')">点击4</button> -->
	<p>{{ message }}</p>
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			message: 'Hello Vue!!',
			size: 'default',
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			console.log("Start...");
			
		})
	},
	computed: {
		hasStr(){
			return function(str){
				return this.message.includes(str);
			}
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	},
	//监听属性，监听器
	watch:{
		message:function(value){
			console.log("message发生了改变：" + value);
		}
	},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>